<template>
  <view>
	  <u-navbar :is-back="false" title="库存"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
    <CommDetail :cid="cid" :info="info"
      :current="4">
      <view class="interval u-skeleton-rect">
        库存商品 <u-button style="margin:20rpx"
          size="mini" type="primary"
          @click="OnClinkT">新增/更新库存
        </u-button>

      </view>
      <view class="listgoods"
        v-for="(g,index) in list" :item="item"
        :key="index">
        <view class="x-row">
          <image :src="$api.ProImg(g.fProId)"
            class="goodsimg ">
          </image>
          <view class="x-col">

            <view class="goodstitel ">
              {{g.fProName}}
            </view>

            <view class="nuber">
              整装（{{g.fPackUnit}}）：{{g.fPackCount}}
            </view>
            <view class="nuber">
            散装（{{g.fUnit}}）：{{g.fCount}}
            </view>
            <!--判断是配送者才显示这个一个项，如果不是不显示 如果不是不显示 fDeyUserId 这个字段和当前用户是同一个值-->
            <view class="x-row">
              <view class="time">
                过期时间：{{g.fOverTime}}
              </view>
              <view class="x-col">
              </view>
              <view class="prme">

              </view>
            </view>
          </view>
        </view>
      </view>
      <u-empty text="暂无数据" mode="list"  v-if="!list.length">
      </u-empty>
     <!-- <u-button v-if="form.OrderStatus === 0"
        type="primary">更新库存
      </u-button>-->
    </CommDetail>

  </view>

</template>
<script>
import orlist from '@/components/orlist'
import CommDetail from './commdetail'
export default {
  components: { orlist, CommDetail },
  data() {
    return {
      cid: 0,
      info: {},
      current: 0,
      tabs: [
        {
          name: '客户库存',
          value: 0
        },
        {
          name: '临期商品',
          value: 3
        },
        {
          name: '商品处理',
          value: 4
        }
      ],
      tabs2: [
        {
          name: '到期时间',
          value: 1
        },
        {
          name: '库存量',
          value: 2
        }
      ],
      list: [],
      form: {
        OrderType: 0,
        MrkId: 0,
        Key: '',
        OrderStatus: 0
      }
    }
  },
  methods: {
    getList() {
      this.$axios('api/MrkProStock/ListPaged', 'post', { value: this.form }).then(res => {
        this.list = res.Value.List
      })
    },
    change(e) {
      this.form.OrderStatus = e
      this.form.OrderType = this.tabs[e].value
      this.getList()
    },
    change2(e) {
      this.current = e
      this.form.OrderType = this.tabs2[e].value
      this.getList()
    },
    OnClinkT() {
      uni.navigateTo({
        url: `/pages/my_customer/my_customer_stock_add?id=${this.cid}`
      })
    }
  },
  onLoad(e) {
    this.cid = Number(e.id)
    this.$axios('api/MrkBasic/GetDetail', 'post', {
      value: e.id
    }).then(res => {
      this.info = res.Value
      this.loading = false
      this.form.MrkId = this.info.fId
      this.getList()
    })
  }
}
</script>

<style lang="scss" scoped>
.interval {
  color: #333;
  font-size: 32upx;
  line-height: 110upx;
  padding: 0 32upx;
}

.listgoods {
  padding: 32upx;
  border-bottom: 1px solid #f8f8f8;
}

.goodsimg {
  width: 144upx;
  height: 144upx;
  display: block;
  margin-right: 24upx;
}

.goodstitel {
  color: #000;
  font-size: 32upx;
}

.rights {
  color: #000;
  font-size: 333;
  font-size: 32upx;
}

.nuber {
  color: #666;
  font-size: 28upx;
  padding-top: 15upx;
}

.time {
  color: #666;
}

.prme {
  color: #000;
  font-size: 32upx;
  font-weight: bold;
}

.viewbbutton {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  .x-row {
    display: flex;
    justify-content: center;
    ::v-deep button {
      margin: 0 20rpx;
    }
  }
}
</style>